<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--很复杂的父子通信案例-->
<script src="../js/vue.js"></script>
<div id="app">
  <cpn :number1="num1" :number2="num2"
       @num1change="num1change"
       @num2change="num2change"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{number1}}</h2>
    <h2>{{dnumber1}}</h2>
    <input type="text" v-model="dnumber1">
    <h2>{{number2}}</h2>
    <h2>{{dnumber2}}</h2>
    <input type="text" v-model="dnumber2">
  </div>
</template>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      num1:1,
      num2:0
    },
    methods:{
      num1change(a){
        this.num1 =parseInt(a);
      },
      num2change(a){
        this.num2=parseInt(a)
      }
    },
    components:{
      cpn:{
        template:`#cpn`,
        props:{
          number1:Number,
          number2:Number
        },
        data(){
          return{
            dnumber1: this.number1,
            dnumber2:this.number2
          }
        },

        watch:{
          // dnumber1(newValue,oldValue){}
          dnumber1(newValue){
            this.dnumber2 = newValue *100;
            this.$emit("num1change",newValue)
          },
          dnumber2(newValue){
            this.dnumber1 = newValue /100;
            this.$emit("num2change",newValue)
          }
        },
        /*methods:{
          num1Input(event){
            this.dnumber1=event.target.value;
            this.$emit('num1change',this.dnumber1);
            this.dnumber2 =this.dnumber1*100;
            this.$emit('num2change',this.dnumber2);
          },
          num2Input(event){
            this.dnumber2=event.target.value;
            this.$emit('num2change',this.dnumber2);
            this.dnumber1=this.dnumber2 /100;
            this.$emit('num1change',this.dnumber1);
          }
        }*/
      }
    }
  })
</script>

</body>
</html>